<template>
  <el-dialog v-model="visible" :title="'批量修改'" :close-on-click-modal="false" width="1200">
    <div class="flex">
      <div>
        <ma-org-select v-model="queryForm.sysOrgId" placeholder="请选择" @change="getDataList"></ma-org-select>
        <el-table v-loading="loading" border :data="dataList" height="400" style="width: 100%" @selection-change="selectionChangeHandle">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="serialNo" label="车编号" header-align="center" align="center" width="100"></el-table-column>
           <el-table-column prop="plateNo" label="车牌号" header-align="center" align="center" width="100"></el-table-column>
          <el-table-column prop="driverName" label="绑定司机" header-align="center" align="center" width="100"></el-table-column>
          <el-table-column prop="sysOrgName" label="所属公司" header-align="center" align="center" ></el-table-column>
        </el-table>
        <el-pagination
          :current-page="queryForm.page"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="queryForm.limit"
          :total="total"
          layout="total, sizes, prev, pager, next"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle">
        </el-pagination>
      </div>
      <el-button type="primary" icon="DArrowRight" circle style="margin: auto 0" @click="goRight()" />
      <el-button type="primary" icon="DArrowLeft" circle style="margin: auto 0" @click="goLeft()" />
      <div>
        <ma-org-select v-model="transferID" placeholder="请选择"></ma-org-select>
        <el-table v-loading="loading" border :data="transferDataList" height="400" style="width: 100%" @selection-change="selectionChangeHandle">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="serialNo" label="车编号" header-align="center" align="center" width="100"></el-table-column>
          <el-table-column prop="plateNo" label="车牌号" header-align="center" align="center" width="100"></el-table-column>
          <el-table-column prop="driverName" label="绑定司机" header-align="center" align="center" width="100"></el-table-column>
          <el-table-column prop="sysOrgName" label="所属公司" header-align="center" align="center" width="100">
          </el-table-column>
        </el-table>
        <el-button type="primary" style="float: right; margin: 20px" @click="submitHandle">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { transferApi, transmitChangesApi } from '@/api/biz/car'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const transferDataList = ref()
const loading = ref(false)
const dataList = ref()
const data = ref()
const total = ref(0)
const transferID = ref()
const queryForm = reactive({
  page: 1,
  limit: 10,
  sysOrgId: undefined
})

const init = () => {
  transferDataList.value = []
  transferID.value = null
  queryForm.sysOrgId = undefined
  visible.value = true
  getDataList()
}
//获取列表
function getDataList() {
  transferApi(queryForm).then((res) => {
    dataList.value = res.data.list
    total.value = res.data.total
  })
}
//请求列表数据条数
function sizeChangeHandle(val) {
  queryForm.page = 1
  queryForm.limit = val
  getDataList()
}

function currentChangeHandle(val) {
  queryForm.page = val
  getDataList()
}
//获取要移动列表
function selectionChangeHandle(selections) {
  data.value = []
  // console.log(selections)
  data.value = data.value.concat(selections)
  // console.log(data.value)
}

function goRight() {
  move(dataList, data, transferDataList)
}
function goLeft() {
  move(transferDataList, data, dataList)
}
//列表移动
function move(data1, data2, data3) {
  data1.value = data1.value.filter((item) => {
    for (const item2 of data2.value) {
      if (item.id === item2.id) {
        return false
      }
    }
    return true
  })

  if (!data3.value) {
    data3.value = data2.value
    return
  }

  data3.value = data3.value.filter((item) => {
    for (const item2 of data2.value) {
      if (item.id === item2.id) {
        return false
      }
    }
    return true
  })

  data3.value.push(...data2.value)
}
//提交
function submitHandle() {
  if(!transferDataList.value.length){
    ElMessage.error({
      message: '请选择设备',
    })
    return
  }
  if(!transferID.value){
    ElMessage.error({
      message: '请选择公司',
    })
    return
  }
  transmitChangesApi({
    sysOrgId: transferID.value,
    carEntities: transferDataList.value
  }).then(() => {
    ElMessage.success({
      message: '操作成功',
      onClose() {
        visible.value = false
        emit('refreshDataList')
      }
    })
  })
}

defineExpose({
  init
})
</script>

<style scoped>
.item_line {
  display: flex;
}
.item_line > div {
  flex: 1;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
